<template>
  <div id="syslogin">
    <div class="login-container">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input
            type="text"
            placeholder="账号"
            v-model="ruleForm.username"
            autocomplete="off"
            autofocus
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="密码"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="userCaptcha">
          <div style="display: flex">
            <img
              :src="captchaImg"
              alt="Captcha"
              @click="refreshCaptcha"
              style="height: 30px; width: 100px"
            />
            <el-input
              type="text"
              placeholder="输入验证码"
              v-model="ruleForm.userCaptcha"
              @keydown.enter="submit('ruleForm')"
              autocomplete="off"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submit('ruleForm')"
            style="width: 320px"
            >立即登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var a1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    var a2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输密码"));
      } else {
        callback();
      }
    };
    var a3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输密码"));
      } else {
        // 提交验证码
        this.axios
          .post("/authority/user/verifyCaptcha", { captcha: value })
          .then((response) => {
            // 处理验证结果
            if (response.data === "success") {
              // 验证成功
              callback();
              console.log("验证码验证成功");
            } else {
              // 验证失败
              callback(new Error("验证码错误"));
              console.log("验证码验证失败");
            }
          })
          .catch((error) => {
            callback(new Error("验证码错误"));

            console.error("验证码验证失败", error);
          });
      }
    };
    return {
      loginLog: {
        browser: "", //浏览器名称
        operating_system: "", //操作系统
      },
      captchaImg: "",

      ruleForm: {},
      rules: {
        username: [
          { required: true, message: "请输入账号！", trigger: "blur" },
          { validator: a1, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码！", trigger: "blur" },
          { validator: a2, trigger: "blur" },
        ],
        userCaptcha: [
          { required: true, message: "请输入验证码！", trigger: "blur" },
          { validator: a3, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    refreshCaptcha() {
      this.captchaImg = "/authority/user/getCaptcha?" + new Date().getTime();
    },
    submit(formName) {
      //登录
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const userAgent = navigator.userAgent;
          if (userAgent.indexOf("Windows") != -1) {
            this.loginLog.operating_system = "Windows";
          } else if (userAgent.indexOf("Mac") != -1) {
            this.loginLog.operating_system = "macOS";
          } else if (userAgent.indexOf("Linux") != -1) {
            this.loginLog.operating_system = "Linux";
          } else if (userAgent.indexOf("Android") != -1) {
            this.loginLog.operating_system = "Android";
          } else if (userAgent.indexOf("iOS") != -1) {
            this.loginLog.operating_system = "iOS";
          } else {
            this.loginLog.operating_system = "Windows";
          }
          if (userAgent.indexOf("Chrome") != -1) {
            this.loginLog.browser = "Chrome";
          } else if (userAgent.indexOf("Firefox") != -1) {
            this.loginLog.browser = "Firefox";
          } else if (userAgent.indexOf("Edge") != -1) {
            this.loginLog.browser = "Edge";
          } else if (userAgent.indexOf("Safari") != -1) {
            this.loginLog.browser = "Safari";
          } else {
            this.loginLog.browser = "Edge";
          }
          var now = new Date();
          var timestamp =
            now.getFullYear() +
            "-" +
            (now.getMonth() + 1) +
            "-" +
            now.getDate() +
            " " +
            now.getHours() +
            ":" +
            now.getMinutes() +
            ":" +
            now.getSeconds();
          const loading = this.$loading({
            lock: true,
            text: "登录中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          try {
            fetch(
              "/authority/user/doLogin/" +
                this.ruleForm.username +
                "/" +
                this.ruleForm.password +
                "/" +
                this.loginLog.browser +
                "/" +
                this.loginLog.operating_system +
                "/" +
                timestamp,
              {
                method: "POST",
              }
            )
              .then((response) => response.json())
              .then((data) => {
                setTimeout(() => {
                  if (data.code == 200) {
                    console.log(data.data);
                    // 登入成功
                    sessionStorage.setItem(
                      "satoken",
                      JSON.stringify(data.data)
                    );
                    loading.close();
                    this.$router.push("/index");
                    return;
                  }
                  if (data.code == 500) {
                    loading.close();
                    this.$message.error(data.msg);
                    return;
                  }
                }, 3000);
              });
          } catch (error) {
            loading.close();
          }
        } else {
          loading.close();
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  mounted() {
    this.refreshCaptcha();
  },
};
</script>

<style scoped>
#syslogin {
  height: 100%;
  width: 100%;
  background-image: url("https://projectvue.oss-cn-hangzhou.aliyuncs.com/%E5%93%81%E8%BE%BE%E5%90%8E%E5%8F%B0%E7%99%BB%E5%BD%95.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  /* 设置高度为视口的100% */
}

.login-container {
  /* border-radius: 15px;
        background-clip: padding-box; */
  margin: 0 auto;
  width: 400px;
  padding: 15px 35px 100px 35px;
  background: rgba(255, 255, 255, 0.67);
  background: white;
  /* border: 1px solid #eaeaea; */
  /* box-shadow: 0 0 25px #cac6c693; */
  text-align: center;
  position: relative;
  top: 35%;
  left: 30%;
}
</style>
